<template>
  <div>
    <a-form-item-rest>
      <multiPictureUpload @uploadFinished="uploadFinished" @upload_remove_Finished="upload_remove_Finished"
        :fileList="formItem.value" :maxCount="formItem.maxCount" :accept="formItem.accept" :title="formItem.uploadTitle"
        :isAutoUpload="true"></multiPictureUpload>
    </a-form-item-rest>
    <a-form-item-rest>
      <videoUpload @uploadFinished="vuploadFinished" @upload_remove_Finished="vupload_remove_Finished"
        :fileList="vformItem.value" :maxCount="vformItem.maxCount" :accept="vformItem.accept"
        :title="vformItem.uploadTitle" :isAutoUpload="true"></videoUpload>
    </a-form-item-rest>
    <!-- <a-form-item-rest>
      <audioUpload
        @uploadFinished="auploadFinished"
        @upload_remove_Finished="aupload_remove_Finished"
        :fileList="aformItem.value"
        :maxCount="aformItem.maxCount"
        :accept="aformItem.accept"
        :title="aformItem.uploadTitle"
        :isAutoUpload="true"
      ></audioUpload>
    </a-form-item-rest> -->
  </div>
</template>

<script lang="ts" setup>
import multiPictureUpload from "@/components/upload/multiPictureUpload.vue";
import videoUpload from "@/components/upload/videoUpload.vue";
import audioUpload from "@/components/upload/audioUpload.vue";
import { ref, reactive, watch, nextTick, onMounted, } from "vue";
import { dataSourceType } from "@/type.d";
import { cloneDeep } from "lodash";
const formItem = ref<any>({});
const vformItem = ref<any>({});
const aformItem = ref<any>({});
const formState = ref<dataSourceType[]>();
formItem.value = {
  accept: "png,jpg,jpeg,gif",
  action: "",
  directory: false,
  disabled: false,
  isAutoUpload: true,
  isLimit: 0,
  listType: "picture-card",
  maxCount: 1,
  multiple: false,
  percent: 0,
  progress: "line",
  title: "上传图片",
  value: [],
};
vformItem.value = {
  accept: "mp4,ogg",
  action: "",
  directory: false,
  disabled: false,
  isAutoUpload: true,
  isLimit: 0,
  listType: "picture-card",
  maxCount: 1,
  multiple: false,
  percent: 0,
  progress: "line",
  title: "上传视频",
  value: [],
};
aformItem.value = {
  accept: "mp3",
  action: "",
  directory: false,
  disabled: false,
  isAutoUpload: true,
  isLimit: 0,
  listType: "picture-card",
  maxCount: 1,
  multiple: false,
  percent: 0,
  progress: "line",
  title: "上传音频",
  value: [],
};
// 上传图片返回值
const uploadFinished = (data: any, id: any) => {
  if (data) {
    let i = formItem.value.value.findIndex((item: any) => item.id == id);
    if (i == -1) {
      formItem.value.value.push(...data);
    } else {
      formItem.value.value.splice(i, 1, ...data);
    }
  }
};
const upload_remove_Finished = (data: any) => {
  setTimeout(() => {
    let i = formItem.value.value.findIndex((item: any) => item.id == data.id);
    if (i !== -1) {
      formItem.value.value.splice(i, 1);
    }
  }, 10);
};
// 上传视频返回值
const vuploadFinished = (data: any, id: any) => {
  if (data) {
    let i = vformItem.value.value.findIndex((item: any) => item.id == id);
    if (i == -1) {
      vformItem.value.value.push(...data);
    } else {
      vformItem.value.value.splice(i, 1, ...data);
    }
  }
};
// 删除视频
const vupload_remove_Finished = (data: any) => {
  setTimeout(() => {
    let i = vformItem.value.value.findIndex((item: any) => item.id == data.id);
    if (i !== -1) {
      vformItem.value.value.splice(i, 1);
    }
  }, 10);
};
// 上传音频
const auploadFinished = (data: any, id: any) => {
  if (data) {
    let i = aformItem.value.value.findIndex((item: any) => item.id == id);
    if (i == -1) {
      aformItem.value.value.push(...data);
    } else {
      aformItem.value.value.splice(i, 1, ...data);
    }
  }
};
// 删除音频
const aupload_remove_Finished = (data: any) => {
  setTimeout(() => {
    let i = aformItem.value.value.findIndex((item: any) => item.id == data.id);
    if (i !== -1) {
      aformItem.value.value.splice(i, 1);
    }
  }, 10);
};
</script>

<style lang="less" scoped></style>
